<template>
    <div class="Index">
        <Login v-if="showLogin" @close="showLogin=false" />
        <template v-if="user._id">
            <div class="whybg">
                <img src="../static/icons/why-bk.png" alt="">
            </div>
            <p class="p1">创新课程体系</p>
            <p class="p2">闯关教育同步学习</p>
            <p class="p2">学后成长反馈，及时掌握学习状况</p>
            <p class="p1">视频访查机制</p>
            <p class="p2">实时获取孩子学习状态</p>
            <div class="whybg">
                <img src="../static/icons/improve.png" alt="">
            </div>
            <div class="backtop" @click="actami(0)">
            <img src="../static/icons/timg (1).jpg" alt="">
            </div>
        </template>
        <div v-else class="main">
          <div class="header">欢迎来到星星学苑</div>
          <img src="../static/icons/logo.svg" />
          <div class="start" @click="showLogin=true">登录学苑</div>
      </div>
    </div>
</template>
<script>
import Login from '@/components/Login'
export default {
    name:"index",
    components: {
        Login
    },
    data(){
        return{
            scrollTop : 0,
            showLogin: false
        }
    },
    computed: {
        user () {
            return this.$store.state.user
        }
    },
    methods:{
        scroll(){
            this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        },
        actami(target){
            let that = this
            let timer = setInterval(() => {
                //that.scrollTop --
                    that.scrollTop += -70
                    console.log(that.scrollTop);
                    if (target >= that.scrollTop) {
                        clearInterval(timer)
                    }
                window.scrollTo(0,that.scrollTop)
            }, 10);
        }
    },
    mounted(){
        window.addEventListener("scroll", this.scroll)
  }
}
</script>
<style scoped>
.Index {
width: 100vw;
height: 100vh;
background: #F0F0F0;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.main {
height: fit-content;
padding: 110px 30px;
box-sizing: border-box;
max-width: 1000px;
margin: 0 auto;
}
.header {
width: 100%;
color: #40BC96;
text-align: center;
font-size: 42px;
letter-spacing: 3px;
font-weight: bold;
margin-top: 40px;
margin-bottom: 80px;
}

.start {
width: 240px;
height: 64px;
margin: 100px auto 0 auto;
background: #3CCFCF;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 600;
letter-spacing: 2px;
text-decoration: none;
transition: all 0.5s ease;
cursor: pointer;
}
.start:hover {
background: #F9CC28;
color: #455358;
}
.whybg{    
    height: 700px;
    background-repeat:no-repeat;
    background-position:bottom center;
    padding-bottom: 100px
}
.p1{
  text-align:center;
  font-size: 44px;
  font-weight: bold;
  color: rgb(0, 0, 0);
  line-height: 44px;
}
.p2{
  text-align:center;
  font-size: 30px;
  color: #666;
  line-height: 30px;
}
.backtop{
    position: fixed;
    bottom: 52px;
    right: 200px;
}
.backtop img{
    width: 45px;
    height: 45px;
    border-radius: 50%;
}
</style>
